<template>
  <div class="header_box">
    <div class="header_title_box">
      <div class="logo_box">
        <div class="header_img">
          <img src="../../../logo.png" class="header_img_item" style="width: 100%; height: 100%;">
        </div>
        <div class="logoTitleBox">
          <span class="logoTitle">芸助手</span>
          <span class="logoSubTitle">新零售全渠道解决方案提供商</span>
        </div>
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick" class="header_tabs_box1">
        <el-tab-pane label="首页" name="index"></el-tab-pane>
        <!--      <el-tab-pane label="产品与服务" name="product"></el-tab-pane>-->
        <!--      <el-tab-pane label="定价" name="pricing"></el-tab-pane>-->
        <!--      <el-tab-pane label="案例" name="case"></el-tab-pane>-->
        <!--      <el-tab-pane label="业务合作" name="cooperation"></el-tab-pane>-->
        <!--      <el-tab-pane label="加入我们" name="recruit"></el-tab-pane>-->
        <!--      <el-tab-pane label="联系我们" name="contact"></el-tab-pane>-->
        <!--      <el-tab-pane label="媒体中心" name="media"></el-tab-pane>-->
        <el-tab-pane label="下载" name="downloadCenter"></el-tab-pane>
        <el-tab-pane label="教程" name="course"></el-tab-pane>
        <el-tab-pane label="我们" name="introduction"></el-tab-pane>
      </el-tabs>
<!--    <el-dropdown trigger="click" class="header_tabs_cloumn" @command="handleCommand">-->
<!--      <span class="el-dropdown-link">-->
<!--        <i class="el-icon-arrow-down el-icon-more"></i>-->
<!--      </span>-->
<!--      <el-dropdown-menu slot="dropdown">-->
<!--        <el-dropdown-item command="index">首页</el-dropdown-item>-->
<!--&lt;!&ndash;        <el-dropdown-item command="service">产品与服务</el-dropdown-item>&ndash;&gt;-->
<!--&lt;!&ndash;        <el-dropdown-item command="pricing">定价</el-dropdown-item>&ndash;&gt;-->
<!--&lt;!&ndash;        <el-dropdown-item command="case">案例</el-dropdown-item>&ndash;&gt;-->
<!--&lt;!&ndash;        <el-dropdown-item command="cooperation">业务合作</el-dropdown-item>&ndash;&gt;-->
<!--&lt;!&ndash;        <el-dropdown-item command="recruit">加入我们</el-dropdown-item>&ndash;&gt;-->
<!--&lt;!&ndash;        <el-dropdown-item command="contact">联系我们</el-dropdown-item>&ndash;&gt;-->
<!--&lt;!&ndash;        <el-dropdown-item command="media">媒体中心</el-dropdown-item>&ndash;&gt;-->
<!--        <el-dropdown-item command="downloadCenter">下载中心</el-dropdown-item>-->
<!--        <el-dropdown-item command="course">视频教程</el-dropdown-item>-->
<!--        <el-dropdown-item command="introduction">关于我们</el-dropdown-item>-->

<!--      </el-dropdown-menu>-->
<!--    </el-dropdown>-->
    <el-tabs v-model="activeName" @tab-click="handleClick" class="header_tabs_box">
      <el-tab-pane label="首页" name="index"></el-tab-pane>
<!--      <el-tab-pane label="产品与服务" name="product"></el-tab-pane>-->
<!--      <el-tab-pane label="定价" name="pricing"></el-tab-pane>-->
<!--      <el-tab-pane label="案例" name="case"></el-tab-pane>-->
<!--      <el-tab-pane label="业务合作" name="cooperation"></el-tab-pane>-->
<!--      <el-tab-pane label="加入我们" name="recruit"></el-tab-pane>-->
<!--      <el-tab-pane label="联系我们" name="contact"></el-tab-pane>-->
<!--      <el-tab-pane label="媒体中心" name="media"></el-tab-pane>-->
      <el-tab-pane label="下载中心" name="downloadCenter"></el-tab-pane>
      <el-tab-pane label="视频教程" name="course"></el-tab-pane>
      <el-tab-pane label="关于我们" name="introduction"></el-tab-pane>
    </el-tabs>
    <div class="header_botton">
<!--      <span style="margin-right: 10px">登录</span>-->
      <el-button type="warning" @click="regClick()"><span style="font-weight: 600">我要开店</span></el-button>
    </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        activeName: 'index'
      }
    },
    methods: {
      handleClick(data) {
        console.log(data.name)
        this.$emit('tabClick', data.name)
      },
      handleCommand(data){
        console.log(111)
        console.log(data)
        this.$emit('tabClick', data)
      },
      headerBottom(data){
        this.activeName = data
        this.$emit('tabTwoClick', data)
        this.$emit('tabThreeClick',data)
        this.$emit('tebFourClick',data)
      },
      register() {
        this.$router.push('/register')
      },
      regClick() {
        this.$router.push({
          path: '/register'
        })
      }
    }
  }
</script>

<style scoped>
  .header_tabs_content{
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  @media screen and (min-width: 0px) and (max-width: 350px) {
    .logo_box {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .logoSubTitle {
      display: none;
    }
    .header_tabs_box {
      display: none;
    }

    .header_tabs_cloumn {
      flex-grow: 1;
      display: flex;
      justify-content: flex-end;
      padding-right: 10px;
      box-sizing: border-box;
    }
    .header_tabs_box1 {
      margin: 0 auto !important;
      display: flex;
      justify-content: center;
    }

    /deep/.el-tabs__item{
      padding: 0 10px;
    }

    .header_img {
      width: 29px;
      height: 29px;
      margin-right: 10px
    }

    .logoTitle {
      font-size: 16px;
      font-family: LiSu;
      font-weight: 400;
      color: #4D4D4D;
    }

    .header_box {
      display: flex;
      flex-direction: row;
      justify-content: center;
      background-color: rgb(237, 237, 237);
      align-items: center;
      /*padding: 20px 0px;*/
      box-sizing: border-box;
    }
    .header_title_box {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      background-color: rgb(237, 237, 237);
      align-items: center;
      padding: 10px 20px;
      box-sizing: border-box;
    }
    .logoTitleBox {
      display: none;
    }
    .header_botton {
      display: none;
    }
    .el-dropdown-menu {

      position: absolute !important;
      top: 60px !important;
      rightr: 30px !important;
    }
    .el-icon-arrow-down {
      font-size: 20px;
      padding-left: 10px;
    }
  }

  @media screen and (min-width: 351px) and (max-width: 400px) {
    .logoSubTitle {
     display: none;
    }
    .header_tabs_box {
      display: none;
    }

    .header_tabs_cloumn {
      flex-grow: 1;
      display: flex;
      justify-content: flex-end;
      padding-right: 10px;
      box-sizing: border-box;
    }
    .header_tabs_box1 {
      margin: 0 auto !important;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /deep/.el-tabs__item{
      padding: 0 10px;
    }

    .header_img {
      width: 29px;
      height: 29px;
      margin-right: 10px
    }

    .logoTitle {
      font-size: 16px;
      font-family: LiSu;
      font-weight: 400;
      color: #4D4D4D;
    }

    .header_box {
      display: flex;
      flex-direction: row;
      justify-content: center;
      background-color: rgb(237, 237, 237);
      align-items: center;
      /*padding: 20px;*/
      box-sizing: border-box;
    }
    .header_title_box {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      background-color: rgb(237, 237, 237);
      align-items: center;
      padding: 10px 20px;
      box-sizing: border-box;
    }
    .logo_box {
      display: flex;
      flex-direction: row;
      /*margin-right: 20px;*/
    }
    .logoTitleBox {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .header_botton {
      display: none;
    }
    .el-dropdown-menu {
      position: absolute !important;
      top: 64px !important;
      left: 280px !important;
    }
    .el-icon-arrow-down {
      font-size: 20px;
      padding-left: 10px;
    }
  }

  @media screen and (min-width: 401px) and (max-width: 749px) {
    .header_tabs_box {
      display: none;
    }

    .header_tabs_cloumn {
      flex-grow: 1;
      display: flex;
      justify-content: flex-end;
      padding-right: 10px;
      box-sizing: border-box;
    }

    .header_tabs_box1 {
      margin: 0 auto !important;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /deep/.el-tabs__item{
      padding: 0 15px;
    }

    .header_img {
      width: 35px;
      height: 35px;
      margin-right: 10px
    }

    .header_img_item {
      width: 35px !important;
      height: 35px !important;
    }

    .logoTitle {
      font-size: 16px;
      font-family: LiSu;
      font-weight: 400;
      color: #4D4D4D;
    }

    .header_box {
      display: flex;
      flex-direction: row;
      justify-content: center;
      background-color: rgb(237, 237, 237);
      align-items: center;
      padding: 20px;
      box-sizing: border-box;
    }
    .header_title_box {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      background-color: rgb(237, 237, 237);
      align-items: center;
      /*padding: 20px;*/
      box-sizing: border-box;
    }
    .logoSubTitle {
      /*font-size: 16px;*/
      /*font-family: Microsoft YaHei;*/
      /*font-weight: 400;*/
      /*color: #4D4D4D;*/
      /*transform: translate(-20%) scale(0.6);*/
      display: none;
    }
    .logoTitleBox {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .logo_box {
      display: flex;
      flex-direction: row;
      /*margin-right: 20px;*/
    }
    .header_botton {
      display: none;
    }
    .el-dropdown-menu {

      position: absolute !important;
      top: 64px !important;
      left: 280px !important;
    }
    .el-icon-arrow-down {
      font-size: 20px;
      padding-left: 10px;
    }
  }


  @media screen and (min-width: 750px) and (max-width: 1089px) {
    .header_tabs_box {
      margin-left: 70px;
      margin-right: 70px;
      width: 40%;
    }

    /deep/ .el-tabs__header {
      margin: 0;
    }

    /deep/ .el-tabs__nav-wrap::after {
      height: 0px;
    }

    .header_tabs_cloumn {
      display: none;
    }
    .header_tabs_box1 {
      display: none;
    }
    .header_img {
      width: 58px;
      height: 58px;
      margin-right: 17px
    }

    /deep/.el-tabs__item{
      padding: 0 10px;
    }

    .logoTitle {
      font-size: 32px;
      font-family: LiSu;
      font-weight: 400;
      color: #4D4D4D;
    }

    .header_box {
      display: flex;
      flex-direction: row;
      justify-content: center;
      background-color: rgb(237, 237, 237);
      align-items: center;
      padding: 20px;
      box-sizing: border-box;
    }
    .header_title_box {
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;
      align-items: center;
      box-sizing: border-box;
    }
    .logoSubTitle {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #4D4D4D;
      transform: translate(-20%) scale(0.6);
    }
    .logoTitleBox {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .logo_box {
      display: flex;
      flex-direction: row;
      /*margin-right: 20px;*/
    }
    .header_botton {
        display: none;
      }
  }

  @media screen and (min-width: 1090px) and (max-width: 1200px) {
    .header_tabs_box {
      margin-left: 70px;
      margin-right: 70px;
      width: 50%;
    }

    /deep/ .el-tabs__header {
      margin: 0;
    }

    /deep/ .el-tabs__nav-wrap::after {
      height: 0px;
    }

    .header_tabs_cloumn {
      display: none;
    }
    .header_tabs_box1 {
      display: none;
    }

    .header_img {
      width: 58px;
      height: 58px;
      margin-right: 17px
    }

    .logoTitle {
      font-size: 32px;
      font-family: LiSu;
      font-weight: 400;
      color: #4D4D4D;
    }

    .header_box {
      display: flex;
      flex-direction: row;
      justify-content: center;
      background-color: rgb(237, 237, 237);
      align-items: center;
      padding: 20px;
      box-sizing: border-box;
    }
    .header_title_box {
      padding-left: 40px;
      padding-right: 40px;
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;
      align-items: center;
      box-sizing: border-box;
    }
    .logoSubTitle {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #4D4D4D;
      transform: translate(-20%) scale(0.6);
    }
    .logoTitleBox {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .logo_box {
      display: flex;
      flex-direction: row;
      /*margin-right: 20px;*/
    }
    .header_botton {
      display: none;
    }
  }

  @media screen and (min-width: 1200px) {
    .header_tabs_box {
      margin-left: 40px;
      margin-right: 70px;
      /*width: 620px;*/
      display: flex;
      justify-content: center;
    }

    /deep/ .el-tabs__header {
      margin: 0;
    }

    /deep/ .el-tabs__nav-wrap::after {
      height: 0px;
    }

    .header_tabs_cloumn {
      display: none;
    }
    .header_tabs_box1 {
      display: none;
    }

    .header_img {
      width: 58px;
      height: 58px;
      margin-right: 17px
    }

    .logoTitle {
      font-size: 32px;
      font-family: LiSu;
      font-weight: 400;
      color: #4D4D4D;
    }

    .header_box {
      display: flex;
      flex-direction: row;
      justify-content: center;
      background-color: rgb(237, 237, 237);
      align-items: center;
      padding: 20px;
      box-sizing: border-box;
    }
    .header_title_box {
     width: 1200px;
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;
      align-items: center;
      box-sizing: border-box;
    }
    .logoSubTitle {
      font-size: 7px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #4D4D4D;
      /*transform: translate(-20%) scale(0.6);*/
    }
    .logoTitleBox {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .logo_box {
      display: flex;
      flex-direction: row;
      /*margin-right: 20px;*/
    }
    .header_botton {
      display: flex;
      align-items: center;
    }

  }


  .el-dropdown-link {
    cursor: pointer;
  }


  .demonstration {
    display: block;
    color: #8492a6;
    font-size: 14px;
    margin-bottom: 20px;
  }

</style>
